<template>
  <el-card style="margin:14px 8px;">
    <el-form label-position="right" label-width="80px" >
      <el-row type="flex" justify="space-between">
          <el-form-item label="关键字" >
            <el-input v-model="form.keyword"  placeholder="根据编号搜索" >
            </el-input>
          </el-form-item>
        <div >
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </div>
      </el-row>
      <el-row>
        <el-alert type="info" show-icon :closable="false">
          <template #title>
            数据一共 {{ page.total }} 条
          </template>
        </el-alert>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="listRandoms" style="width: 100%;margin-top: 16px;">
      <el-table-column prop="id" label="编号" width="220" />
      <el-table-column prop="" label="题型"  >
        <template v-slot="{row}">
        {{judge(row.questionType)}}
        </template>
      </el-table-column>
      <el-table-column  label="题目编号" width="220" >
        <template v-slot="{row}">
         <el-row v-for="item in row.questionIDs" :key="item.id">
        <a href="javaScript:;" style="color: #0099ff;" @click="bomb(item)">{{item.number}}</a>
        </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="180"/>
      <el-table-column prop="totalSeconds" label="答题时间(s)" />
      <el-table-column prop="accuracyRate" label="正确率(%)" />
      <el-table-column prop="userName" label="录入人" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="danger" :icon="Delete" circle @click="del(row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" style="margin-top:20px ;">
    <el-pagination
      v-model:current-page="page.page"
      v-model:page-size="page.pagesize"
      :page-sizes="[20, 30, 50, 100]"
      :small="small"
      :disabled="disabled"
      background="#f4f4f5"
      layout="  prev, pager, next, sizes,jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="changePage"
    />
  </el-row>
  </el-card>
  <el-dialog
    v-model="showDialog"
    title="题目预览"
    width="70%"
    align-center
    destroy-on-close
    :before-close="handleClose"
  >
    <!-- <span width=25% >【题型】：</span>
    <span width=25% >【编号】：</span>
    <span width=25% >【编号】：</span>
    <span width=25% >【编号】：</span> -->
  <div>
    <el-row>
    <el-col :span="6">【题型】：</el-col>
    <el-col :span="6">【编号】：</el-col>
    <el-col :span="6">【难度】：</el-col>
    <el-col :span="6">【标签】：</el-col>
  </el-row>
  <br/>
    <el-row>
    <el-col :span="6">【学科】：</el-col>
    <el-col :span="6">【目录】：</el-col>
    <el-col :span="6">【方向】：</el-col>
  </el-row>
  <hr/>
  <div>【题干】：</div>
  <div>选项：（以下选中的选项为正确答案）</div>

  <hr/>
  <div>【参考答案】：
    <el-button type="danger" @click="videoBtn">视频答案预览</el-button>
  </div>
  <div v-if="videoFile"  >
    <!--  -->
    <video style="width:400px ;height: 300px;object-fit: fill;"  autoplay controls src="">
      <source>
    </video>
  </div>
  <hr/>
  <div>【答案解析】：</div>

  <hr/>
  <div>【题目备注】：</div>

  </div>

    <template #footer>
      <el-row type="flex" justify="end">
        <el-button @click="showDialog = false" type="primary">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { Delete } from '@element-plus/icons-vue'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import {
  defineComponent,
  reactive,
  getCurrentInstance,
  onMounted,
  ref
}
  from 'vue'
export default defineComponent({
  components: {},
  props: {},
  setup () {
    // 搜索框数据绑定
    const form = reactive({
      keyword: null

    })
    const instance = getCurrentInstance()
    // 表单分页
    // 分页
    const page = reactive({
      page: 1,
      pagesize: 20,
      total: 0
    })
    function changePage (val) {
      page.page = val
      getList()
    }
    const handleSizeChange = (val) => { // 每页显示数量
      page.pagesize = val
      getList()
    }
    // 清除按钮
    function clear () {
      form.keyword = null
      search()
    }
    // 搜索按钮
    function search () {
      page.page = 1
      getList()
    }

    // 文章列表渲染
    const loading = ref(false) // 加载状态
    const listRandoms = ref([])
    async function getList () {
      loading.value = true // 开启加载
      const { data: { items, counts } } = await randoms({ ...page, ...form })
      console.log(items)

      listRandoms.value = items
      page.total = counts
      loading.value = false // 关闭加载
    }
    onMounted(() => {
      getList()
    })
    // 删除按钮
    const $app = instance.appContext.config.globalProperties
    async function del (row) {
      $app.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        removeRandoms(row).then(() => {
          $app.$message.success('删除成功！')
          getList()
        })
      }).catch(() => {

      })
    }
    // 题型判断
    function judge () {
      if (listRandoms.value.questionType === 1) {
        return '单选'
      } else if (listRandoms.value.questionType === 2) {
        return '多选'
      } else {
        return '简答'
      }
    }
    // 题目编号弹框
    const add = ref()
    const showDialog = ref(false)
    async function bomb (val) {
      showDialog.value = !showDialog.value
      videoFile.value = false

      const { data } = await detail({ id: 78 })
      // add.value = await detail({ id: 71 })
      console.log(add.value)
      console.log(data)
    }
    // videoFile 默认关闭视频DOM
    const videoFile = ref(false)
    // videoBtn  通过按钮控制视频的显示/隐藏
    function videoBtn () {
      videoFile.value = !videoFile.value
    }
    return {
      form,
      add,
      showDialog,
      page,
      videoBtn,
      listRandoms,
      getList,
      del,
      judge,
      changePage,
      handleSizeChange,
      search,
      clear,
      videoFile,
      loading,
      bomb,
      Delete
    }
  }
})
</script>
<style lang="less" scoped>

</style>
